<template>
  <div class="page-bannerAdView">
    <a-tabs
      v-model:activeKey="activeKey"
      :tabBarGutter="39"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
    >
      <a-tab-pane key="1" tab="广告列表" force-render> <ad-list ref="adListRef" /> </a-tab-pane>
      <a-tab-pane key="2" tab="广告位" force-render> <ad-place ref="adPlaceRef" /></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AdList from './AdList.vue'
import AdPlace from './AdPlace.vue'

const activeKey = ref('1')
const adListRef = ref()
const adPlaceRef = ref()
const handleChange = (key: string) => {
  console.log('key: ', key)
  if (key === '1') {
    adListRef.value.getBannerList()
    console.log('adListRef.value: ', adListRef.value)
  } else {
    adPlaceRef.value.getPlaceList()
    console.log('adPlaceRef.value: ', adPlaceRef.value)
  }
}
onMounted(() => {
  adListRef.value.getBannerList()
})
</script>

<style lang="less" scoped>
.page-bannerAdView {
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }

  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 140px;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
